<template>
  <el-button-group style="position: fixed;right: 20px;top: 20px;z-index: 999">
    <el-button size="small" @click="download">
      <i class="el-icon-download"></i>下载
    </el-button>
    <el-button size="small" @click="onVideoClose">
      <i class="el-icon-circle-close"></i>退出
    </el-button>
  </el-button-group>
  <div id="video">
    <div class="player-container">
      <el-progress style="position:absolute;width: 80%;top: 40%;left: 10%" v-if="transcoding" :text-inside="true" :stroke-width="26" :percentage="percent">
        <span>解码中：{{ percent }}%</span>
      </el-progress>
      <div class="pc" v-if="!!options.src && windowWidth > 640">
        <div class="video">
          <video-play v-bind="options"/>
        </div>
        <div class="description">
          <el-card>
            <el-descriptions :column="1" title="视频信息">
              <el-descriptions-item label="视频名称：" label-class-name="min-100"> {{
                  videoInfo.fileName
                }}
              </el-descriptions-item>
              <el-descriptions-item label="创建者：" label-class-name="min-100">{{
                  videoInfo.fileCreator
                }}
              </el-descriptions-item>
              <el-descriptions-item label="修改时间：" label-class-name="min-100">{{
                  videoInfo.fileCreationDate
                }}
              </el-descriptions-item>
              <el-descriptions-item label="视频大小：" label-class-name="min-100">
                <file-size-render :size="videoInfo.fileSize"></file-size-render>
              </el-descriptions-item>
            </el-descriptions>
            <el-divider></el-divider>
            <p v-if="list.length > 0">更多视频：</p>
            <el-row :gutter="10">
              <el-col :span="6" v-for="file of list" @click="onSwitch(file.fileId)"
                      style="cursor: pointer;height: 150px;line-height: 30px">
                <video class="more" :src="baseURL + 'resourceController/getResource/' + file.fileId"></video>
                <el-ellipsis :text="file.fileName" :length="8"></el-ellipsis>
                <br/>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </div>
      <div class="mobile" v-if="!!options.src && windowWidth < 640">
        <div class="video">
          <video-play v-bind="options"/>
        </div>
        <el-card class="description">
          <el-descriptions :column="1" title="视频信息">
            <el-descriptions-item label="视频名称：" label-class-name="min-100"> {{
                videoInfo.fileName
              }}
            </el-descriptions-item>
            <el-descriptions-item label="创建者：" label-class-name="min-100">{{
                videoInfo.fileCreator
              }}
            </el-descriptions-item>
            <el-descriptions-item label="修改时间：" label-class-name="min-100">{{
                videoInfo.fileCreationDate
              }}
            </el-descriptions-item>
            <el-descriptions-item label="视频大小：" label-class-name="min-100">
              <file-size-render :size="videoInfo.fileSize"></file-size-render>
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <p>更多视频：</p>
          <el-row :gutter="10">
            <el-col :span="12" v-for="file of list" @click="onSwitch(file.fileId)"
                    style="cursor: pointer;height: 150px;line-height: 30px">
              <video class="more" :src="baseURL + 'resourceController/getResource/' + file.fileId"></video>
              <el-ellipsis :text="file.fileName" :length="8"></el-ellipsis>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {Else, Is, when} from "when-case";
import {ElMessage} from "element-plus";
import axios from "axios";
import FileSizeRender from "./FileSizeRender.vue";
import FileTypeIcon from "../view/home/table/fileTypeIcon.vue";
import ElEllipsis from "./ellipsis.vue";
import {videoPlay} from 'vue3-video-play'
import 'vue3-video-play/dist/style.css'

export default {
  name: "video-player",
  components: {ElEllipsis, FileTypeIcon, FileSizeRender, videoPlay},
  props: {
    fileId: String,
    list: Array
  },
  emits: ["onSwitchVideo", "onVideoClose"],
  setup(props, {emit}) {
    const onVideoClose = (e) => {
      emit('onVideoClose', e);
    }
    return {
      onVideoClose
    }
  },
  data() {
    return {
      videoInfo: {},
      baseURL: null,
      transcoding: false,
      percent: 0,
      options: {
        width: '100%', //播放器高度
        height: '100%', //播放器高度
        color: "#409eff", //主题色
        title: '', //视频名称
        src: null, //视频源
        muted: false, //静音
        webFullScreen: false,
        speed: true, //关闭进度条拖动
        speedRate: ["0.5", "0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: true,  //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制器
        poster: null,
        controlBtns: [
          "audioTrack",
          "quality",
          "speedRate",
          "volume",
          "setting",
          "pip",
          "pageFullScreen",
          "fullScreen",
        ], //显示所有按钮,
      },
      windowWidth: 1000
    }
  },
  methods: {
    download() {
      window.open(this.options.src);
    },
    play() {
      this.transcoding = false;
      this.options.title = this.videoInfo.fileName;
      this.options.src = axios.defaults.baseURL + "resourceController/getResource/" + this.fileId;
    },
    transcode() {
      this.$http.post("resourceController/getVideoTranscodeStatus.ajax", {fileId: this.fileId}).then(res => {
        when(res,
            Is("FIN", () => this.play()),
            Is("ERROR", "播放失败，请刷新重试。"),
            Else(() => {
              this.transcoding = true;
              this.percent = res;
              setTimeout(() => {
                this.transcode();
              }, 500);
            })
        )
      })
    },
    onSwitch(id) {
      this.$emit("onSwitchVideo", id);
    }
  },
  created() {
    this.baseURL = axios.defaults.baseURL;
    this.windowWidth = window.innerWidth;
    this.$http.post("homeController/playVideo.ajax", {fileId: this.fileId}).then(result => {
      let err = when(result,
          Is("ERROR", "无法定位要预览的文件或该操作未被授权"),
          Else(() => {
            this.videoInfo = result;
            if (this.videoInfo?.needEncode === "N") {
              this.play();
            } else {
              this.transcode();
            }
          })
      )
      if (err) ElMessage.error(err);
    }).catch(err => {
      ElMessage.error("无法定位要预览的文件或该操作未被授权");
    })
  }
}
</script>

<style scoped lang="less">
#video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 998;
  background: rgba(255, 255, 255, 0.8);

  .pc {
    width: 100%;
    height: calc(28.125vw + 50px);
    text-align: center;
    margin-top: 50px;
    position: relative;

    .video {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 50vw;
      height: 28.125vw;
    }

    .description {
      position: absolute;
      left: 0;
      right: 0;
      margin: 60px auto;
      top: 28.125vw;
      width: 50vw;
    }
  }

  .mobile {
    width: 100%;
    height: calc(28.125vw + 50px);
    text-align: center;
    margin-top: 100px;
    position: relative;

    .video {
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 90vw;
      height: 50.625vw;
    }

    .description {
      position: absolute;
      left: 0;
      right: 0;
      margin: 60px auto;
      width: 90vw;
      top: 50.625vw;
    }
  }
}

.more {
  width: 100%;
  pointer-events: none;
  height: 100px;
  background: #000;
}
</style>
